Navbar
8 Jahre 8 Monate her - 8 Jahre 8 Monate her #2534
von Matthias
Da aus der Beschreibung deines Problems nicht genau hervorgeht, welchen Teil der Navigation du rechts anordnen willst, hier ein paar Lösungsvorschläge auf unterschiedliche Interpretationsmöglichkeiten:
1. Im Desktop-Design die Items des Topmenüs rechtsbündig anzeigen:
2. Im mobilen Design die 3 Striche rechts anordnen:
Generell gilt:
Da es sich um LESS-Code handelt, muss der Code in eine der beiden Dateien eingetragen werden:
/css/custom.css (wird wie eine LESS-Datei behandelt)
/less/custom.less
Danach musst du nur noch den Template-Stil speichern und schon solltest du das Resultat sehen können.
Erklärung
:
Die Media-Queries dienen dazu zwischen der Mobilen-Ansicht Ansicht und der Desktop-Ansicht zu unterschieden. Damit der Custom-Code auch mit den Parametern der Konfiguration arbeitet ist LESS-Code nötig. Denn dieser unterstützt Variablen.
Die Variable @maxMobileWidth wird aus der Konfiguration "übersetzt" und gibt, wie ihr Name schon vermuten lässt, die maximale Breite an, die ein Fenster haben darf, damit noch das mobile Design angezeigt wird.
Die Variable @minDesktopWidth ergibt sich aus der Variable @maxDesktopWidth + 1px. Sie gibt die minimale Fensterbreite für die Desktop-Anzeige an.
Ich hoffe ich konnte dir weiterhelfen.
1. Im Desktop-Design die Items des Topmenüs rechtsbündig anzeigen:
Code:
@media (min-width: @minDesktopWidth) {
#topmenu ul.menu {
text-align: right;
}
}
2. Im mobilen Design die 3 Striche rechts anordnen:
Code:
@media (max-width: @maxMobileWidth) {
nav .navbar .btn-navbar, nav .navbar .btn-navbar:hover {
text-align: right;
}
}
Generell gilt:
Da es sich um LESS-Code handelt, muss der Code in eine der beiden Dateien eingetragen werden:
/css/custom.css (wird wie eine LESS-Datei behandelt)
/less/custom.less
Danach musst du nur noch den Template-Stil speichern und schon solltest du das Resultat sehen können.
Erklärung
:Die Media-Queries dienen dazu zwischen der Mobilen-Ansicht Ansicht und der Desktop-Ansicht zu unterschieden. Damit der Custom-Code auch mit den Parametern der Konfiguration arbeitet ist LESS-Code nötig. Denn dieser unterstützt Variablen.
Die Variable @maxMobileWidth wird aus der Konfiguration "übersetzt" und gibt, wie ihr Name schon vermuten lässt, die maximale Breite an, die ein Fenster haben darf, damit noch das mobile Design angezeigt wird.
Die Variable @minDesktopWidth ergibt sich aus der Variable @maxDesktopWidth + 1px. Sie gibt die minimale Fensterbreite für die Desktop-Anzeige an.
Ich hoffe ich konnte dir weiterhelfen.
Letzte Änderung: 8 Jahre 8 Monate her von Matthias.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 8 Monate her #2536
von Matthias
Die besagten Dateien existieren standardmäßig nicht und müssen vom Nutzer selber erstellt werden. Dass diese Dateien standardmäßig nicht existieren hat den Vorteil, dass sie bei einem Update des Templates nicht überschrieben werden
.
Du kannst diese Dateien erstellen, indem du im Backend unter Erweiterungen -> Templates -> Templates das Lessallrounder auswählst. Nun solltest du die Dateien des Templates ansehen und ändern können. In der Toolbar gibt es den Button "Neue Datei".
Was die Untermenüs angeht, so lässt sich dies leicht beheben, indem man folgendes in der LESS-Datei ergänzt bzw. ändert:
Die von dir erstellten Bilder sollten anders als die Vorhandenen heißen, da sie sonst bei einem Update des Templates überschrieben werden würden.
Bei diesem Code sieht man zwei weitere Vorteile von LESS gegenüber CSS:
1. Regeln lassen sich verschachteln
2. Hierbei kann man sich mit & auf die bisherigen Regeln beziehen (siehe &:hover)
Nein, ich meinte es genauso, wie es da steht./css/custom.css -->ist sicher die template9.css gemeint.
Ja, jedes Mal, wenn man den Template-Stil speichert.Wird die nicht überschrieben?
Die besagten Dateien existieren standardmäßig nicht und müssen vom Nutzer selber erstellt werden. Dass diese Dateien standardmäßig nicht existieren hat den Vorteil, dass sie bei einem Update des Templates nicht überschrieben werden
.Du kannst diese Dateien erstellen, indem du im Backend unter Erweiterungen -> Templates -> Templates das Lessallrounder auswählst. Nun solltest du die Dateien des Templates ansehen und ändern können. In der Toolbar gibt es den Button "Neue Datei".
Was die Untermenüs angeht, so lässt sich dies leicht beheben, indem man folgendes in der LESS-Datei ergänzt bzw. ändert:
Code:
@media (min-width: @minDesktopWidth) {
# topmenu ul.menu {
/* Hier steht der Code aus dem obigen Post */
text-align: right;
/* Hier kommt der neue Code */
ul.nav-child {
/* Untermenüs erster Ordnung */
right: 0px;
/* Pfeile auf die entgegengesetzte Seite */
li {
background-image: url(); /* hier muss die url(../images/...) des von dir um 180° um die X-Achse gedrehten Bildes (/images/menu/menulili_parent.gif) rein */
background-position-x: left;
&:hover {
background-image: url(); /* hier muss die url(../images/...) des von dir um 180° um die X-Achse gedrehten Bildes (/images/menu/menulili_parent_hover.gif) rein */
}
}
/* 3. Ebene und mehr immer nach links aufklappen */
ul.nav-child {
left: -214px;
}
}
}
}
Bei diesem Code sieht man zwei weitere Vorteile von LESS gegenüber CSS:
1. Regeln lassen sich verschachteln
2. Hierbei kann man sich mit & auf die bisherigen Regeln beziehen (siehe &:hover)
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 8 Monate her #2537
von Matthias
Kann es sein, dass du den gesamten Code aus der template.less in die custom.less kopiert hast und den dann angepasst hast? Das ist nicht nötig und macht die Sache unnötig kompliziert. Da die custom.less ja zum Rest dazugeschrieben wird, reicht es, wenn du nur deine eigenen Änderungen darin stehen hast. Dann wird die custom.less viel übersichtlicher und die template9.css viel kleiner 
.
. Bitte Anmelden oder Registrieren um der Konversation beizutreten.
Ladezeit der Seite: 0.218 Sekunden